<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .header {
            height: 200px;
        }
        
        .container {
            height: 400px;
            background-color: darkgray;
        }
        
        .footer {
            background-color: purple;
            height: 80px;
        }
    </style>
</head>

<body>
    <!-- div布局 -->
    <div class="header">头部</div>
    <div class="container">内容区</div>
    <div class="footer">页脚区</div>

    <!-- 语义化标签 -->
    <header>页面头部</header>
    <nav>导航栏区域</nav>
    <section>文档区域 div的替代品</section>
    <time>日期和时间</time>
    <article>文章区域</article>
    <aside>侧边栏</aside>
    <footer>页脚</footer>
    <figure>一组媒体对象及文字区域</figure>
    <figcaption>定义figure的标题</figcaption>
</body>

</html>